<template>
  <div class="container">
    <el-card>
      <!--  首航表单 -->
      <el-form
        ref="listform"
        label-width="80px"
        :rules="rules"
        :model="parameter"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="parameter.keyword"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="parameter.state" placeholder="请选择活动区域">
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button @click="clearFrom">清除</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="getinfo">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="success" icon="el-icon-edit" @click="addskll"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- /首航表单 -->

      <!-- 警示消息 -->
      <el-alert :closable="false" title="数据一共x条" type="info" show-icon>
      </el-alert>
      <!-- /警示消息 -->

      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="280">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i
              class="el-icon-film"
              v-if="scope.row.videoURL"
              @click="playvideo(scope.row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="180">
        </el-table-column>
        <el-table-column prop="username" label="录入人" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="250">
          <template slot-scope="scope">
            {{ scope.row.createTime | dataFormat }}
          </template>
        </el-table-column>
        <el-table-column property="state" label="状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button size="mini" @click="previewShow(scope.row)"
              >预览</el-button
            >

            <el-button size="mini" @click="disabledBtn(scope.row)">
              <span v-if="scope.row.state === 1">禁用</span>
              <span v-else>启用</span>
            </el-button>

            <el-button
              size="mini"
              :disabled="scope.row.state === 1 ? true : false"
              @click="change(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              :disabled="scope.row.state === 1 ? true : false"
              @click="removeBtn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格区域 -->

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="parameter.page"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="parameter.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
      <!-- /分页区域 -->
    </el-card>
    <!-- 编辑添加子组件 -->
    <articl
      :dialogVisible="dialogVisible"
      :category="category"
      @closedialog="dialogVisible = false"
      :companyDetails="companyDetails"
      @colosedialog="dialogVisible = false"
      @updatalist="getinfo"
    ></articl>
    <!-- /编辑添加子组件 -->

    <!-- 预览组件 -->
    <preview
      :previewVisible="previewVisible"
      @previewclose="previewVisible = false"
      :details="details"
      :userName="userName"
    ></preview>
    <!-- /预览组件 -->

    <!-- 视频对话框 -->
    <el-dialog
      :visible.sync="videoVisible"
      :show-close="false"
      class="videoclass"
    >
      <div class="closex" @click="closevideo">X</div>
      <div v-if="videoVisible">
        <video :src="vUrl" class="sssss" autoplay></video>
      </div>
    </el-dialog>
    <!-- /视频对话框 -->
  </div>
</template>

<script>
import { list, changeState, remove, detail } from "@/api/hmmm/articles.js";
import articl from "@/module-hmmm/components/articles-add";
import preview from "@/module-hmmm/components/articles-preview";

export default {
  components: {
    articl,
    preview
  },
  data() {
    return {
      form: {
        region: ""
      },
      rules: {
        keyword: [{ required: true, message: "请输入关键字", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "blur" }]
      },
      tableData: [], // 所有数据
      // 请求参数
      parameter: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      counts: 0, // 总条数
      dialogVisible: false, // 对话框的显示与隐藏
      category: true, //对话框提示文字
      companyDetails: {},
      previewVisible: false, // 预览对话框的显示与隐藏
      details: {}, // 预览的所有信息
      userName: "",
      videoVisible: false, // 视频对话框的显示与隐藏
      vUrl: ""
    };
  },
  methods: {
    // 获取所有数据
    async getinfo() {
      const { data } = await list(this.parameter);
      console.log(data);
      this.counts = data.counts;
      this.tableData = data.items;
      // console.log(this.tableData);
    },
    // 清除搜索条件
    clearFrom() {
      this.$refs.listform.resetFields();
      this.getinfo();
    },
    // 禁用启用
    async disabledBtn(data) {
      // console.log(data.state);
      if (data.state === 1) {
        await changeState({
          id: data.id,
          state: 0
        });
      } else {
        await changeState({
          id: data.id,
          state: 1
        });
      }
      this.getinfo();
    },
    // 根据id删除对应信息
    async removeBtn(data) {
      const message = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      console.log(message);
      if (message !== "confirm") {
        return this.$message("已经取消删除");
      }
      await remove(data);
      this.$message("删除成功");
      this.getinfo();
    },
    handleSizeChange(val) {
      this.parameter.pagesize = val;
      this.getinfo();
    },
    handleCurrentChange(val) {
      this.parameter.page = val;
      this.getinfo();
    },
    // 修改信息
    async change(val) {
      this.dialogVisible = true;
      this.category = true;
      const { data } = await detail(val);
      // console.log(data);
      this.companyDetails = data;
    },
    // 添加技巧、
    addskll() {
      this.dialogVisible = true;
      this.category = false;
    },
    // 预览按钮事件
    async previewShow(val) {
      this.previewVisible = true;
      this.userName = val.username;
      console.log(this.userName);
      const { data } = await detail(val);
      console.log(data);
      this.details = data;
    },
    // 播放视频
    playvideo(val) {
      this.videoVisible = true;
      this.vUrl = val;
      console.log(this.vUrl);
    },
    closevideo() {
      this.videoVisible = false;
    }
  },
  created() {
    this.getinfo();
  }
};
</script>

<style scoped lang="less">
.container {
  margin: 8px;
}
.el-icon-film {
  color: blue;
}
/deep/.videoclass .el-dialog__header {
  background-color: unset;
  display: none;
}
/deep/.videoclass .el-dialog {
  background-color: unset;
  margin-top: 200px;
  position: absolute;
  top: 100px;
  left: 370px;
}
/deep/.videoclass .el-dialog__body {
  padding: 0px;
}
.closex {
  background-color: #fff;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  font-size: 30px;
  background-color: #cccc;
  position: absolute;
  top: -100px;
  left: 400px;
}
.sssss {
  z-index: 999;
  width: 100%;
  height: 100%;
}
/deep/.el-pagination {
  margin-top: 15px;
}
/deep/.quill-editor {
  height: 100px;
}
</style>